<template>
	<view class="content">
		<block v-if="chain">
			<view class="fu-color-999999 fu-text-c" style="height: 100rpx;background: #dee6ef;">
				<text class="fu-m-t-10">欢迎使用fu-vtabs组件，这是头部内容，有头部内容必须传hdHeight参数</text>
			</view>
			<fu-vtabs
				:chain="chain"
				:list="list"
				:height="customHeight"
				hdHeight="100rpx"
				@change="change">
				<!-- #ifdef VUE2 -->
				<template v-for="(item,index) in list">
					<fu-vtabs-item :index="index" :key="index">
				<!-- #endif -->
				<!-- #ifdef VUE3 -->
				<template v-for="(item,index) in list" :key="index">
					<fu-vtabs-item :index="index">
				<!-- #endif -->
						<view class="item"
							v-for="(item2,index2) in item.childrens"
							:key="index2">
							<view class="item-title">
								<text class="text">{{item2.name}}</text>
							</view>
							<view class="item-content">
								<text class="text">{{item2.desc}}</text>
							</view>
						</view>
						<view class="fu-bg-grey fu-h-16" v-if="index < list.length - 1"></view>
					</fu-vtabs-item>
				</template>
				<view style="height: 500px;"></view>
			</fu-vtabs>
		</block>
		<block v-else>
			<fu-vtabs
				:chain="chain"
				:list="list"
				@change="change">
				<fu-vtabs-item>
					<view class="item" v-for="(item2,index2) in list2" :key="index2">
						<view class="item-title">
							<text class="text">{{item2.name}}</text>
						</view>
						<view class="item-content">
							<text class="text">{{item2.desc}}</text>
						</view>
					</view>
				</fu-vtabs-item>
			</fu-vtabs>
		</block>
	</view>
</template>

<script setup>
	import { getCurrentInstance, ref, computed } from 'vue';
	import { onLoad, onReady } from '@dcloudio/uni-app';
	
	// data数据
	const { $parseURL } = getCurrentInstance().appContext.config.globalProperties;
	let list = ref([]);
	let chain = ref(true);
	let value = ref(0);
	const getList = [{
		name: 'uni-app简介',
		childrens: [{
			name: 'uni-app简介',
			desc: 'uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。'
		}]
	}, {
		name: 'uni-app特点',
		childrens: [{
			name: '跨平台兼容性',
			desc: '一套代码可编译生成安卓、iOS、网页、多种小程序（如微信、抖音）等，实现一次开发多端运行。'
		}, {
			name: '开发速度快',
			desc: '借助 HBuilderX IDE，编译和构建速度快，支持快速迭代和调试。'
		}, {
			name: '成本效益高',
			desc: '大幅减少多平台重复开发，缩短上线时间，降低开发资源消耗。'
		}]
	}, {
		name: '更新日志',
		badge: {
			show: true,
			value: 6
		},
		childrens: [{
			name: '更新日志',
			desc: 'fusions-ui每次重大迭代中再更新日志中都有说明，但技术探索永无止境————若您再开发过程中发现文档存在疏漏或需要更详尽的说明，请提供给我们，您的声音将直接推动Fusions-UI文档体系的进化，让我们共同打造更流畅的开发体验。谨此感谢所有开发者的信任与支持，每一次issue提交、每一份PR都是对开源社区最珍贵的贡献，与您携手构建更强大的前端工具链'
		}]
	}, {
		name: '设计规范',
		childrens: [{
			name: '设计规范',
			desc: '通过模块化组件，构建高复用、低沉余的体系，打造优质的体验，部分之间会有依赖，为了减少代码冗余的同时提高开发效率，模块化是我们的基础。如果大家有好的建议，可以提出进行改进。'
		}]
	}, {
		name: '交流反馈',
		childrens: [{
			name: '交流反馈',
			desc: 'fusions-ui遵循MIT开源协议，意味着您无需任何费用，同时也无需授权，将fusions-ui应用到您的产品中；欢迎加QQ群交流反馈，一起学习，共同进步。QQ群： 712627377'
		}]
	}];
	
	// 生命周期
	onLoad((options) => {
		const query = $parseURL(options.query);
		chain.value = query.chain
	});
	
	onReady(() => {
		// 模拟接口请求数据
		uni.showLoading({
			title: '加载中'
		})
		setTimeout(() => {
			list.value = getList;
			uni.hideLoading();
		}, 500)
	});
	
	// computed计算属性
	const customHeight = computed(() => uni.getSystemInfoSync().windowHeight - uni.upx2px(100));
	const list2 = computed(() => {
		const newList = list.value[value.value]?.childrens;
		return newList? newList: [];
	})
	
	// methods方法
	const change = (index) => {
		console.log('选项改变：',index)
		value.value = index;
	}
</script>

<style lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	.item {
		padding: 10rpx 20rpx;
		&-title {
			.text {
				font-weight: 700;
				font-size: 32rpx;
				color: #111;
			}
		}
		&-content {
			padding: 20rpx 0;
			.text {
				line-height: 48rpx;
				font-size: 30rpx;
				color: #111;
				/* #ifndef APP-NVUE */
				word-break: break-all;
				/* #endif */
			}
		}
	}
	.gap {
		padding: 0 30rpx;
	}
</style>